<template> 
    <div class="recipe-page">
        <r-site :item="detailData.address" v-if="detailData.address"></r-site>
        <cf-content :item="detailData" :doctor="detailData.doctor"></cf-content>
        <cf-transport :item="detailData"></cf-transport>
    </div> 
</template>

<script>
import rSite from '@/components/tpl/site' 
import cfContent from '@/components/tpl/chufang/cf-content'
import cfTransport from '@/components/tpl/chufang/transport' 
import * as api from '@/utils/api' 
export default {
    onLoad (opt){ 
        this.getDetailList(opt.orderId2);
    },
    components: { 
        rSite,
        cfContent,
        cfTransport
    }, 
    data () {
        return {
            detailData:{}
        }
    },
    methods:{
        getDetailList(id){
            let vm = this;
            let body={
                model: "Orders", 
                with:{
                    "0":"doctor",
                    "1":"address"
                },
                condition:{
                    id:id
                } 
            }; 
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){
                    let arrItem=res.data.data; 
                    vm.detailData=arrItem; 
                } 
            })
        },
    }
}

</script>
 
<style scoped lang="scss">
.recipe-page{
    padding:30rpx;
    box-sizing:border-box;
    .site-null{
        width:100%;
        font-size:28rpx;
        background:#fff;
        padding:30rpx;
        box-sizing:border-box;
        border-radius:10rpx;
        margin-bottom:20rpx;
        .text{
            font-size:28rpx;
            color:#9D9D9D;
        }
        .icon{
            color:#CD4640;
        }
    }
    .chufang-content{
        margin-bottom:20rpx;
        .cf-content{ 
            padding:10rpx 25rpx;
            margin-bottom:20rpx;
            box-sizing:border-box;
            background:#fff;
            border-radius:10rpx;
            .group{
                padding:20rpx 0;
                box-sizing:border-box;
                border-bottom:1rpx solid #E0E0E0;
            }
            .title{
                font-size:27rpx;
                color:#A3A3A3;
            }
            .head{   
                .head-img{ 
                    display: flex;
                    justify-content:center;
                    align-items:Center; 
                    .img{
                        width:70rpx;
                        height:70rpx;
                        border:0;  
                    }
                    .describe{ 
                        display:inline-block; 
                        margin-left:18rpx;
                        .name{
                            font-size:28rpx;
                            color:#333; 
                        }
                        .text-info{
                            margin-top:6rpx;
                            font-size:24rpx;
                            color:#CBCAC9;
                        }
                    }
                }
                .title{
                    span{
                        line-height:70rpx;
                    }
                }
                
            }
            .drug{
                font-size:28rpx;
                color:#333;
                margin-top:10rpx;
            }
            .footer{
                font-size:30rpx;
                color:#333;
                padding:20rpx;
                box-sizing:border-box;
                span{
                    color:#CD4640;
                }
            }
        }

    }
    .chufang-info{
        margin-bottom:20rpx;
        padding:10rpx 25rpx;
        font-size:28rpx;
        background:#fff;
        border-radius:10rpx;
        .list{
            padding:20rpx 0;
            box-sizing:border-box;
            border-bottom:1rpx solid #E0E0E0;
            &:last-child{
                border:0;
            }
            .price{
                color:#CD4640;
            }
            .title{
                color:#9E9E9E;
            }
        }

    }
} 
</style>
